<template>
  <div>
    <div class="header">
      选择教室：
      <el-cascader
        ref="clroom"
        v-model="classroom"
        placeholder="试试搜索：101"
        :options="devlist"
        :props="SetKesDept"
        @change="elect"
      ></el-cascader>
    </div>
    <el-table
      :data="tableStatus"
      style="width: 100%"
    >
      <!-- <el-table-column
        prop="xh"
        label="序号"
        width="50"
      >
      </el-table-column> -->
      <el-table-column
        prop="name"
        label="机位"
        width="120"
      >
      </el-table-column>
      <el-table-column
        align="center"
        label="侧前方"
      >
        <template slot-scope="scope">
          <div
            class="statu"
            :class="scope.row.status[0] == 0 ? 'erroy' : 'succe'"
          ></div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="侧后方"
      >
        <template slot-scope="scope">
          <div
            class="statu"
            :class="scope.row.status[1] == 0 ? 'erroy' : 'succe'"
          ></div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="正前方"
      >
        <template slot-scope="scope">
          <div
            class="statu"
            :class="scope.row.status[2] == 0 ? 'erroy' : 'succe'"
          ></div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="工艺相机"
      >
        <template slot-scope="scope">
          <div
            class="statu"
            :class="scope.row.status[3] == 0 ? 'erroy' : 'succe'"
          ></div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="正前方LCD"
      >
        <template slot-scope="scope">
          <div
            class="statu"
            :class="scope.row.status[4] == 0 ? 'erroy' : 'succe'"
          ></div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="实训设备"
      >
        <template slot-scope="scope">
          <div
            class="statu"
            :class="scope.row.status[5] == 0 ? 'erroy' : 'succe'"
          ></div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="教师门禁"
      >
        <template slot-scope="scope">
          <div
            class="statu"
            :class="scope.row.status[6] == 0 ? 'erroy' : 'succe'"
          ></div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="展示屏"
      >
        <template slot-scope="scope">
          <div
            class="statu"
            :class="scope.row.status[7] == 0 ? 'erroy' : 'succe'"
          ></div>
        </template>
      </el-table-column>

      <!-- <el-table-column
        fixed="right"
        label="设备操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="medium "
            style="color: #015176; font-size: 20px"
            @click="handleClick(scope.row)"
          >
            <i class="el-icon-refresh"></i>
          </el-button>
          <el-button
            type="text"
            size="medium"
            style="color: #9f0008; font-size: 20px"
          >
            <i class="el-icon-switch-button"></i>
          </el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <!-- 页码
    <el-pagination
      v-show="total > 10"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination> -->
  </div>
</template>
<script>
import { querytreeFloor, queryCamerStatus } from "@/api";
export default {
  data() {
    return {
      SetKesDept: {
        value: "id",
        label: "title",
      },
      devlist: [],
      roomCode: "",
      classroom: "",
      tableStatus: [
        {
          id: 202111001,
          name: "203一号测试机",
          status: [1, 0, 0, 0, 0, 0, 0, 1],
        },
      ],
    };
  },
  mounted() {
    querytreeFloor()
      .then((res) => {
        this.devlist = res.data;
      })
      .catch((err) => {
        console.log(err);
      });
    this.queryStatus();
  },
  methods: {
    elect(value) {
      this.queryStatus(value[1]);
    },

    queryStatus(roomCode = this.roomCode) {
      queryCamerStatus({ roomCode }).then((res) => {
        this.tableStatus = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.statu {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #888;
  margin: 0 auto;
}
.succe {
  background-image: linear-gradient(to right bottom, #06ee1b, #05dc1a);
}
.erroy {
  background-image: linear-gradient(to right bottom, #a30014, #880514);
}
</style>
